import { OperateBase } from '../../common/operate-base';
import './font-color.less'
import { FullColorPannel } from '../../common/full-color-pannel';
import { FontStylePlugin } from '../../../pugins/font-style.plugin';
import { NFont } from '../../../types/style.interface';
// <div class="z-tools-icon icon iconfont icon-align-left"></div>
export class FontColor extends OperateBase {
    protected container: HTMLElement;
    protected fontStylePlugin: FontStylePlugin;
    protected iconMap: {[key: string]: number} = {
        'icon-align-left':0,
        'icon-align-center':1,
        'icon-align-right':2
    }
    constructor() {
        super();
    }
    public afterDomInit(): void {
        this.zTableInstance.getHook().afterSelect.add((val) => {
            this.toggleDisabled(val !== null);
            this.disabled = val === null;
        });
        this.fontStylePlugin = this.zTableInstance.pluginManager.getPlugin(FontStylePlugin.pluginName);
        this.toggleDisabled(false);
    }
    protected toggleDisabled(isDisabled: boolean) {
        let ele: HTMLElement = this.container.querySelector('.iconfont');
        let btn: HTMLElement = this.container.querySelector('.z-tools-btn');
        if(!isDisabled) {
            btn.classList.add('z-drop-down-disabled');
            ele.classList.add('z-table-icon-disabled');
        } else {
            btn.classList.remove('z-drop-down-disabled');
            ele.classList.remove('z-table-icon-disabled');
        }
    }
    public selectChange() {

    }
    public getDom() {
        this.container = document.createElement('div');
        this.container.setAttribute('class', this.containerClassName);
        this.container.innerHTML=`
            <div class="z-table-tools-font-h">
                <div class="z-tools-btn" >
                    <div class="z-tools-icon icon iconfont icon-font-colors" style="font-size:22px"></div>
                    <div class="icon-down"></div>
                </div>
                <div class="options">
   
                </div>
            </div>
        `;
        let tpl: any = document.createDocumentFragment();
        tpl.appendChild(this.container);
        let fullColorPannel = new FullColorPannel((color) => {
            this.fontStylePlugin.excute({color: color})
        });
        let optionsContainer = this.container.querySelector('.options');
        optionsContainer.append(fullColorPannel.getDom());
        optionsContainer.addEventListener('click', (e) => {
            e.stopPropagation();
            e.preventDefault();
        })
        let optionContainer = this.container.querySelector('.options') as HTMLElement;

        document.addEventListener('click', () => {
            optionContainer.style.display = 'none';
        });
        this.container.querySelector('.icon-down').addEventListener('click', (e) => {
            optionContainer.style.display = 'block';
            e.stopPropagation();
            e.preventDefault();
        });
        return tpl;
    }
    protected changeActive(val: number) {
        let iconEle = this.container.querySelector('.z-tools-icon').classList;
        let activeKey = '';
        for(let key in this.iconMap) {
            iconEle.remove(key);
            if(this.iconMap[key] === val) {
                activeKey = key;
            }
        }
        iconEle.add(activeKey);
        let optionsNodes = this.container.querySelectorAll('.font-h-item');
        optionsNodes.forEach(item => {
            if(Number(item.getAttribute('EHorizontally')) === val) {
                item.classList.add('font-h-item-active');
            } else {
                item.classList.remove('font-h-item-active');
            }
        })
    }
}